<template>
  <section id="default" style='background:#eee;'>
    <div style='padding-bottom:50px;'>
    <section id="orderrecord">
      <div style='height:240px;margin:100px auto;line-height:240px;text-align:center;color:#999;font-size:20px;' v-if='extensionOff'>
         暂无订单数据
      </div>
      <div 
        v-else
        class="orderlist" 
        v-for="(val,index) in 5"
        :key='index'
        >
          <el-row>
             <el-col :span='8'>
               <img src="http://cdn.temzt.cn/appbanana/20180625/_g29d7527ad217451088fc6754f24c18ad.jpg" width="90" height="70">
             </el-col>
             <el-col :span='12' class='order-info-font'>
               <h3>陶瓷</h3>
               <div>类型：灰色</div>
             </el-col>
             <el-col :span='4'>
               <span class='order-status'>已发货</span>
             </el-col>
          </el-row>
          <p style='border-bottom:1px solid rgb(239,239,239);margin-top:15px;'></p>
          <el-row style='padding:8px 0;'>
            <el-col :span='12' style='line-height:28px;'>
              <strong>实价：100</strong>
            </el-col>
            <!-- <el-col :span='6'>
              <el-button 
                 v-if='offPay(val.orderStatus)'
                 style='float:right' 
                 @click.stop="goPay(val.num)"  
                 type="danger" 
                 size="mini" 
                 plain>
                 去支付
               </el-button>
            </el-col>
            <el-col :span="showWidth(val.orderStatus)" v-if='showClose(val.orderStatus)'>
              <el-button 
                 style='float:right' 
                 @click.stop="afterOrdEv(val.orderStatus,val.num)"  
                 type="danger" 
                 size="mini" 
                 plain>
                 {{afterOrdVal(val.orderStatus)}}
               </el-button>
            </el-col> -->
          </el-row>

      </div> 
  </section>
    </div>
     <!-- 这两个层都是控制左边导航 -->
    <CloseLeft v-if='controlModel'  @closeModel='controlModel=false'/>
    <transition
        enter-active-class='animated bounceInLeft'
        leave-active-class='animated bounceOutLeft'
    >
        <Left v-if='controlModel'  @changeType='changeType'/>
    </transition>
    <!-- 这两个层都是控制左边导航 -->

    <!-- 这一个层是聊天二维码 -->
    <transition
        enter-active-class='animated fadeIn'
        leave-active-class='animated fadeOut'
    >
        <Qr v-if='controlQr' @closeQr='controlQr=false'/>
    </transition>
    <!-- 这一个层是聊天二维码 -->
    <Bottom @openLeft='controlModel=true' @openQr='controlQr=true' @car='goCar' @goIndex='goIndex'/>

  </section>
</template>
<script>
import Left from '@/components/left.vue';
import Bottom from '@/components/bottom.vue';
import CloseLeft from '@/components/close-left.vue';
import Qr from '@/components/qr.vue';
export default {
  data(){
    return ({
      extensionOff:false,
      //轮播图
      imgArr:[
            'http://cdn.temzt.cn/appbanana/20180625/_g29d7527ad217451088fc6754f24c18ad.jpg',
            'http://cdn.temzt.cn/appbanana/20180626/_gd684862c5e8c4cdb9a7f3f56e2324da9.jpg'
      ],
      //商品规格图
      guigeImg:[
            'http://img.vipshequ.cn/picture/size800img/2013_6_28_0_1773178501.jpg',
            'http://img3.imgtn.bdimg.com/it/u=2151683135,2840656928&fm=27&gp=0.jpg',
            'http://image.ehmall.com.cn/productinfo/2014/07/11/121068.jpg'
      ],
      controlModel:false,     //控制左边导航
      controlQr:false,        //控制二维码
    });
  },
  beforeCreate(){
    $('title').text('历史订单');
  },
  components:{
    Left,
    Bottom,
    CloseLeft,
    Qr,
  },
  methods:{
    //左边导航的选择
    changeType(){},
    goCar(){
        this.$router.push({path:'/myCarList'});
    },
    //回到主页
    goIndex(){
      this.$router.push({path:'/index'});
    }
  },
  mounted(){
    setTimeout(function(){
        new Swiper ('.swiper-container', {
            autoplay : {
              delay:3000,
              disableOnInteraction: false,
            },
            scrollbar: {
               el: '.swiper-scrollbar',
            },
        }); 
        $('.swiper-scrollbar .swiper-scrollbar-drag').css('background','rgba(0,0,0,0.3)');
        $('.animation').click(function(){
            let el=$(this)
            el.addClass('bounceIn');
            setTimeout(function(){
                el.removeClass('bounceIn');
            },300);
        });
        $('.animation1').click(function(){
            let el=$(this)
            el.addClass('jello');
            setTimeout(function(){
                el.removeClass('jello');
            },300);
        });
    },300);
  }
}
</script>
<style scoped>
   .title{
        padding:10px 10px;
        font-size:16px;
        letter-spacing: 1px;
        line-height: 26px;
   }
   .btn-compute > div{
        width:33.3%;
        height:30px;
        float:left;
        font-size:22px;
        text-align: center;
        line-height: 20px;
        color:#0e74de;
   }
   .change-guige{
        padding:15px 18px;
        font-size:16px;
        color:#999;
   }

   #orderrecord .navitem {
      font-size: 14px;
      height: 45px;
      line-height: 45px;
      margin: auto;
      width: 70px;
      text-align: center;
    }
    #orderrecord .navaction {
      border-bottom: 2px solid #f1cf83;
      font-weight: bold;
    }
    #orderrecord > .orderlist {
      padding: 15px 15px 10px 15px;
      margin-bottom:5px;
      background-color: white;
    }
    #orderrecord > .orderlist .orderstatus {
      display: inline-block;
      float: right;
    }
    .order-status{
        display: inline-block;
        width: 50px;
        height: 20px;
        float: right;
        line-height: 20px;
        text-align: center;
        background: #ecf5ff;
        color: #429dff;
    }
    .order-info-font{
        line-height:20px;
        font-size: 15px;
    }
    .order-info-font h3{
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .order-info-font div{
        line-height:25px;
        color: #999;
        font-size: 12px;
    }
</style>
